<template>
    <div>
        <el-container class="home-container">
            <el-aside width="200px">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="medium">
                </el-input>
                <el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
                    ref="tree">
                </el-tree>
            </el-aside>
            <el-main class="maincontainer">
                <el-row type="flex" align="middle">
                    <el-col :span="2">
                        <span>统计日期</span>
                    </el-col>
                    <el-col :span="10">
                        <el-date-picker v-model="DateRange" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="medium">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryBtn" size="medium">查 询</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="resettingBtn" size="medium">重 置</el-button>
                    </el-col>
                </el-row>

                <div class="pancel">
                    <div>
                        <h5>今日</h5>
                        <div>
                            <span>5次</span>
                            <span>18人</span>
                        </div>
                    </div>
                    <div>
                        <h5>昨日</h5>
                        <div>
                            <span>5次</span>
                            <span>18人</span>
                        </div>
                    </div>
                    <div>
                        <h5>本周</h5>
                        <div>
                            <span>5次</span>
                            <span>18人</span>
                        </div>

                    </div>
                </div>
                <!-- echarts -->
                <div id="monthWorkOrder" class="stringDiagram" style="width: 85%; height: 600px;">1</div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    created() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    data() {
        return {
            chartInstance: '',
            filterText: '',
            // 分类
            treeData: [{
                id: 2,
                label: '图书馆',
                children: [{
                    id: 5,
                    label: '图书馆1'
                }, {
                    id: 6,
                    label: '图书馆2'
                }]
            }, {
                id: 3,
                label: '实验室',
                children: [{
                    id: 7,
                    label: '实验室1'
                }, {
                    id: 8,
                    label: '实验室2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },]
            },
            DateRange: '',
        }
    },
    methods: {
        initChart() {
            var chartDom = document.getElementById('monthWorkOrder');
            var myChart = this.$echarts.init(chartDom);
            // 设置你的图表配置
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['预约次数', '取消预约次数']
                },
                // 你的配置项
                xAxis: {
                    type: 'category',
                    data: ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '预约次数',
                        data: [200, 400, 400, 300, 600, 700, 900, 300, 200, 400, 600, 700],
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: '取消预约次数',
                        data: [180, 200, 200, 40, 350, 400, 120, 160, 80, 200, 40, 150],
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            myChart.setOption(option);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        queryBtn() {
            console.log(this.DateRange);
            console.log(this.$ECharts);
        },
        resettingBtn() {
            this.DateRange = ''
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>

<style lang="less" scoped>
.home-container {
    height: 100%;
}

.el-main {
    padding: 0 20px;
}

.maincontainer {
    span {
        margin-right: 10px;
        color: #606266;
    }

    .pancel {
        display: flex;

        >div {
            padding: 10px 60px 0 40px;

            margin-right: 10px;
            margin-top: 20px;
            width: 300px;
            height: 120px;
            border: 1px solid #dddada;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            background-color: #fff;

            >div {
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .stringDiagram {
        width: 85%;
        height: 600px;
        //  background-color: #606266;
    }

}
</style>